<template>
    <div class="userManager">
        <div class="userWrap userdetailBox">
            <div class="header">
                <div class="headCon_l">
                    <img class="useravatar" src="../../assets/avatar2.png" alt="">
                    <!-- <i class="useravatar"></i> -->
                </div>
                <div class="headCon">
                    <p class="headConTit">{{personList.PersonName}}</p>
                    <p class="deptTit">{{personList.UnitName}}</p>
                </div>
            </div>
            <!-- <p class="userDetit">完善信息</p> -->
            <ul class="userManagerList">
                <!-- <li class="userManagerLi" 
                    v-for="(item,index) in personList"
                    :key="index">
                    <div class="userManagerCon">姓名</div>
                    <div class="userManagerCon_r">
                        <input type="text"
                                value="张三" 
                               :disabled="true">
                    </div>
                </li> -->
                <li class="userManagerLi">
                    <div class="userManagerCon">姓名</div>
                    <div class="userManagerCon_r">
                        <input type="text"
                                :value="personList.PersonName" 
                               :disabled="isDisabled">
                    </div>
                </li>
                <li class="userManagerLi">
                    <div class="userManagerCon">单位</div>
                    <div class="userManagerCon_r">
                        <input type="text"
                                :value="personList.UnitName" 
                               :disabled="isDisabled">
                    </div>
                </li>
                <li class="userManagerLi">
                    <div class="userManagerCon">手机号</div>
                    <div class="userManagerCon_r">
                        <input type="text"
                                :value="personList.TelPhone" 
                               :disabled="isDisabled">
                    </div>
                </li>
                <li class="userManagerLi">
                    <div class="userManagerCon">{{personList.Station == '管理人员'? '岗位':'工种'}}</div>
                    <div class="userManagerCon_r">
                        <input type="text"
                                :value="personList.Category" 
                               :disabled="isDisabled">
                    </div>
                </li>
            </ul>   
        </div> 
        <myMenu></myMenu>
    </div>
</template>
<script>
import myMenu from '@/commonComponents/menu'
export default {
    name: 'userinfo',
    components: {
        myMenu
    },
    data(){
        return {
            isDisabled: true,//是否可输入
            user: {
                unit: '',//单位
                email: '',//邮箱
                phone: ''//电话
            },
            userInfo: [],//用户信息
            personList: {}//用户信息列表
        }
    },
    created () {
        this.userInfo = JSON.parse(localStorage.getItem('userInfo'))
        this.getData()
        // this.getPersonList()
    },
    methods: {
        //获取人员详情
        getData () {
            var that = this
            var params = {
                "allowPaging":true,
                "business":"getPersonByTel",
                "data":{
                    "userid": this.userInfo.userid,
                    "tel": this.userInfo.tel
                    },
                "pageIndex":0,
                "pageSize":1000,               
                "userId":"-1670623103"
                }
            this.$axiosAjax.getConfigJson(params)
            .then((res) =>{
                // console.log(res)
                if(res.data.code == 0){
                    that.personList = res.data.data
                }else{
                    this.$vux.toast.text(res.data.info)
                }         
            })
        }
    }
}
</script>
<style scoped>
.headCon .deptTit{
    font-size: 13.5px;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
}
.userdetailBox .header{
    display: flex;
    display: -webkit-flex;
    vertical-align: middle;
    align-items: center;
    height: 118px;
    padding-right: 10px;
    margin-bottom: 40px;
}
.userManager .headCon_l img{
    width: 74px;
    /* background: url('../../assets/avatar.png') no-repeat center center; */
} 
.userdetailBox .userDetit{
    height: 36px;
    line-height: 36px;
    font-size: 15px;
    font-weight: bold; 
}
.userManager .headCon{
    margin-left: 15px;
    line-height: 23px;
    font-size: 15px;
    color: #666;
}
.userManager .headConTit{
    color: #333;
    font-weight: bold;
}
.userWrap{
    padding-left: 20px;
}
.userManager .headCon{
    flex: 1;
}
.headCon_r{
    line-height: 116px;
}
.userManagerList{
    width: 100%;
    background: #fff;
    border-top: 1px solid #efeff4;
}
.userManagerList .userManagerLi{
    display: flex;
    display: -webkit-flex;
    height: 50px;
    line-height: 50px;
    border-bottom: 1px solid #efeff4;
    font-size: 13px;
    padding-right: 20px;
}
.userManagerLi .userManagerIcon{
    display: block;
    width: 38px;
    height: 50px;   
}

.userdetailBox .userManagerCon{
    flex: 1;
    padding-left: 10px;
}
.userManager .userManagerGo{
    display: block;
    width: 38px;
    height: 50px;
    background: url('../../assets/jinru.png') no-repeat center center;
    background-size: 12px 12px;
}
.unclickable .userManagerCon{
    color: #ccc;
}
.userManagerCon_r input{
    width: 240px;
    text-align: right;
    background-color: #fff;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
}
</style>
<style>
.userManager .weui-toast .weui-toast__content{
    color: #fff;
    font-size: 14px;
}
</style>



